<template>
  <a-modal
    ref="announcementRef"
    :body-style="{ minHeight: '540px' }"
    :footer="false"
    :title="dialog.title"
    :visible="dialog.visible"
    :width="500"
    cancel-text="取消"
    draggable
    ok-text="保存"
    title-align="start"
    @cancel="handleCancel"
  >
    <h2 class="rich_media_title">{{ detail?.title }}</h2>
    <div class="meta_content">
      <dict-tag :options="sys_notice_priority_type" :value="detail?.priority" style="margin-top: -10px; margin-right: 5px" />
      <span class="rich_media_meta text">{{ detail?.senderName }}</span>
      <span class="rich_media_meta text">{{ detail?.sendTime }}</span>
    </div>
    <div id="content" style="font-size: 16px; font-weight: 500" />
  </a-modal>
</template>
<script lang="ts" setup>
import { SysAnnouncementVo } from "@/api/system/announcement/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_notice_priority_type } = toRefs<any>(proxy?.useDict("sys_notice_priority_type"));

const detail = ref<SysAnnouncementVo>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: "查看详情"
});
// 打开弹窗
const show = async (row: SysAnnouncementVo) => {
  detail.value = row;
  dialog.visible = true;
  const contentContainer: any = document.getElementById("content");
  let richText: string = row.msgContent;
  if (richText.includes("&lt;") || richText.includes("&gt;")) {
    richText = richText.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  }
  contentContainer.innerHTML = richText;
};

// 取消
const handleCancel = () => {
  dialog.visible = false;
};

defineExpose({
  show
});
</script>
<style lang="less" scoped>
.rich_media_title {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 14px;
}

.meta_content {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  line-height: 20px;
  font-size: 0;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.rich_media_meta {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
  font-size: 15px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rich_media_meta.text {
  color: var(--color-text-4);
}

.detail_body {
  height: 500px;
}
</style>
